<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div>
        {{ info.name || "" }}
      </div>
    </template>
    <div class="text-center">
      <div style="width: 100%; height: 150px" class="flex mb-2">
        <el-image
          v-for="(item, index) in picUrl"
          :key="index"
          style="width: 200px"
          :src="item"
          :preview-src-list="picUrl"
          :initial-index="index"
          fit="cover"
          class="flex-1"
          preview-teleported
        />
      </div>

      <el-row :gutter="24" style="min-width: 350px">
        <el-col :span="14" :xs="24">
          <el-descriptions :column="1" border>
            <el-descriptions-item
              v-for="(item, index) in infoList"
              :key="index"
              :label="item.label"
            >
              <div
                style="width: 100%; white-space: normal; word-break: break-all"
              >
                {{
                  item.formatter
                    ? item.formatter(info[item.prop])
                    : info[item.prop]
                }}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="10">
          <el-descriptions
            v-for="(row, index) in statistics"
            :key="index"
            :title="row.label"
            :column="1"
          >
            <el-descriptions-item
              v-for="item in row.children"
              :key="item.prop"
              :label="item.label"
            >
              {{ statisticsInfo[item.prop] }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { detailApi } from "@/api/too";
import { computed, onMounted, ref } from "vue";
import dict from "@/utils/dict";

const route = useRoute();

const data = ref({} as any);
onMounted(() => {
  detailApi({ toolId: route.query.id }).then(res => {
    data.value = res.data;
  });
});

const info = computed(() => {
  return data.value.toolVo ?? {};
});

const picUrl = computed(() => {
  const str = info.value.picUrl || "";
  const arr = str.split(",");
  if (info.value.innerPicUrl) {
    arr.push(info.value.innerPicUrl);
  }
  return arr;
});

const infoList = [
  { label: "物件编号", prop: "code" },
  { label: "物件品类", prop: "toolCategoryName" },
  { label: "物件型号", prop: "modelName" },
  { label: "物件品牌", prop: "brandName" },
  {
    label: "标签属性",
    prop: "isLabel",
    formatter: val => {
      return val == 1 ? "有标签" : "无标签";
    }
  },
  { label: "标签编码", prop: "labelCode" },
  { label: "存放位置", prop: "storageLocation" },
  {
    label: "库存状态",
    prop: "storageState",
    formatter: val => {
      const target = dict.storageState(val);
      return target.name;
    }
  },
  { label: "定检周期", prop: "inspectCycle", formatter: val => `${val}天` },
  {
    label: "借出时间",
    prop: "maxLendTime",
    formatter: val => `单次借出不超过${val}小时`
  },
  {
    label: "使用状态",
    prop: "state",
    formatter: val => (val == 1 ? "未借出" : "已借出")
  },
  {
    label: "维修状态",
    prop: "fixState",
    formatter: val => (val == 1 ? "未报修" : "已报修")
  }
];

const statisticsInfo = computed(() => data.value.detailToolStatisticsVo ?? {});
const statistics = [
  {
    label: "近期统计",
    children: [
      { label: "近期借出", prop: "recentLendCount" },
      { label: "近期用户", prop: "recentLendUserCount" },
      { label: "近期报修", prop: "recentReportFixCount" }
    ]
  },
  {
    label: "数据统计",
    children: [
      { label: "累计借出", prop: "totalLendCount" },
      { label: "累计用户", prop: "totalLendUserCount" },
      { label: "累计定检", prop: "totalInspectCount" },
      { label: "累计报修", prop: "totalReportFixCount" }
    ]
  }
];
</script>

<style lang="scss" scoped>
::v-deep(.el-card__header) {
  padding: 10px;
}

::v-deep(.el-descriptions__label) {
  width: 80px;
}
</style>
